<template>
	<div class="comfirm">
		<!-- 顶部返回 -->
		<van-nav-bar
		  title="确认订单"
		  left-arrow
		  @click-left="$router.push({name:'cart'})"
		/>
		<!-- 头部联系人地址 -->
		<van-contact-card type="add" @click="onAdd" v-if="!name"/>
		<van-contact-card
		  :type="type"
		  :name="name"
		  :tel="tel"
		  @click="onEdit"
		  v-else
		/>
		<!-- 商品信息 -->
		<van-cell is-link @click="$router.push({name:'shopxiangqing'})">
		  <!-- 使用 title 插槽来自定义标题 -->
		  <template #title>
		    <span class="custom-title" v-for="item in shujv" :key="item.goods_id">
				<img class="img" :src="item.small_image" alt="加载失败">
			</span>
			<span class="shop_jian">共计<i>{{shujvLen}}</i>件</span>
		  </template>
		</van-cell>
		<!-- 底部栏 -->
		<van-submit-bar :price="price*100" button-text="去支付" @submit="onSubmit" />
		<!-- 出口，出地址栏 -->
		<router-view @shujv="shujvIndex" :shujvList="shujvAll" :address="address" :id="id"></router-view>
	</div>
</template>

<script>
	import PubSub from 'pubsub-js'
	import {mapMutations,mapState} from 'vuex'
	import {reqCartApi,selectCartsGoodsApi,reqAddressApi} from "@/api";
	import {setStorage} from "@/plugins/localStorage";
	import { Toast } from 'vant';
	export default {
		name:'confirm',
		 data() {
		    return {
				type:'add',
		        name: '',
		        tel: '',
				//打中对勾的全部数据
				shujvAll:[],
				shujv:[],
				shujvLen:0,
				price:0,
				address:[],
				id:0,
				index:0
		    }
		  },
		  watch:{
			  index(){
				  this.resaddress()
			  }
		  },
		  async created() {
			  
			//删除单条地址时候订阅
			PubSub.subscribe("del_address",this.delAddress)
			// console.log(this.index)
			// //将数据重新请求同步到内存中，防止在此页面刷新问题
		  	this.autologin()
		  	let {token} = this.isDenglu
			this.resaddress()
		  	let obj = {}
		  	let res = await reqCartApi(token)
		  		let {data} = res.data;
		  		data.forEach(item=>{
		  			let {goods_id:id,goods_name:name,small_image,goods_price:price,checked:isChecked,num} = item;
		  			let shujv = {id,name,small_image,price,num,isChecked}
		  			obj[id] = shujv
		  		
		  	});
		  	setStorage("shopcart",obj)
		  	this.givegoods()
			//请求已打对勾的商品数据
			let Address = await selectCartsGoodsApi(token)
			if(Address.data.success_code === 200){
				this.shujvAll = Address.data.data
				this.shujv = Address.data.data.slice(0,3)
				this.shujvLen = Address.data.data.length
				this.price =  Address.data.data.map(item=>item.goods_price*item.num).reduce((prev,now)=>prev+now)
			}else{
				Toast('商品请求失败')
			}
			this.resaddress()
		  },
		  computed:{
		  	...mapState(["isDenglu","shopcart"]),
		  },
		  
		  methods: {
			  //删除单条地址以后再次执行的方法
			  delAddress(Addressname,_id){
				  if(this.id == _id){
					  //删除默认的地址
					  this.index = 0
					  this.resaddress()
				  }else{
					  //删除其他的地址
					  let index = this.address.findIndex(item=>item.id == _id)
					  this.address.splice(index,1)
				  }
			  },
			  //请求地址数据
			   async resaddress(){
				  //请求已经服务器内部地址所有数据
					  let {token} = this.isDenglu
					  let ress = await reqAddressApi(token)
					  if(ress.data.success_code === 200){
						  //请求成功后
						  if(ress.data.data.length === 0){
							  //数组为空
							  this.type = 'add'
							  this.index = 0
							  this.id = ''
							  this.name = ''
							  this.tel = ''
							  this.address = []
						  }else{
							  //数组中有数据
							  this.type = 'edit'
							  this.address = ress.data.data.map(item=>{
								let {_id:id,address_name:name,address_phone:tel,address_area_detail:address,address_tag:isDefault} = item
								let data = {id,name,tel,address,isDefault}
								return data
							})
							
							let {id,name,tel} = this.address[this.index]
							this.id = id
							this.name = name
							this.tel = tel
						  }
					  	// console.log(ress.data.data)
					  	
					  }else{
					  	Toast('地址请求失败')
					  }
			  },
			  shujvIndex(index){
				  this.index = index
			  },
			...mapMutations(["givegoods","autologin"]),
			onAdd() {
				this.$router.push({name:'address'})
			},
		    onEdit() {
				this.$router.push({name:'address'})
		    },
			onSubmit(){
				// 点击去支付页面
			}
		  },
	}
</script>

<style scoped lang="less">
	.comfirm{
		/deep/ .van-icon-arrow-left{
			color: #000000;
			}
			.van-cell{
				margin: 10px 0;
				display: flex;
				align-items: center;
				.shop_jian{
					color: #ccc;
					i{
						color: #FB0005;
						font-weight: 600;
						font-size: 16px;
					}
				}
				.van-cell__title{
					img{
						width: 80px;
						height: 80px;
					}
				}
			}
		}
		.van-submit-bar{
			z-index: 5;
			background-color: #f5f5f5;
		}
</style>